import React, { Component, Fragment } from "react";
import { Layout, Menu, Icon, Row, Col, Drawer} from 'antd';
import {Link} from 'react-router-dom'
import "../style/index.scss";

// const { Search } = Input;

const {Header} = Layout;

class HeaderCom extends Component {
    constructor(props){
        super(props)
        this.state = {
            navs:[
                {
                    tit:'首页',
                    icon:'home',
                    to:'/'
                },
                {
                    tit:'聊天室',
                    icon:'message',
                    to:'/chat'
                },
                {
                    tit:'待办事项',
                    icon:'to-top',
                    to:'/todo'
                },
                {
                    tit:'简历',
                    icon:'profile',
                    to:'/Resume'
                },
                {
                    tit:'博客',
                    icon:'layout',
                    to:'/'
                },
                {
                    tit:'留言板',
                    icon:'form',
                    to:'/message'
                }
            ],
            visible: false
            // fix:'block'
        }
    }

    // componentDidMount(){
    //     this.setState(
    //         {
    //             fix:'block'
    //         }
    //     )
    // }
    popFunc (openKeys){
        this.showDrawer()
    }

    showDrawer () {
        this.setState({
          visible: true,
        });
    };

    onClose () {
        this.setState({
          visible: false,
        });
    };

    render() {
        const {hSty} = this.props
        return (
        <Fragment>
            <Header className="animated slideInDown"  style={hSty?hSty:{}}>
                <Row type='flex' justify="center">
                    <Col md={{span:1, order:0, offset:0}} xs={{span:1, order:0, offset:1}}  lg={{span:1, order:1, offset:0}} xl={{span:1, order:1, offset:0}} xxl={{span:1, order:1, offset:0}}>
                        <div className="logo">
                            <img src={this.props.logo} className="App-logo" alt="logo" />
                        </div>
                    </Col>

                    <Col md={{span:9, order:1}} xs={{span:8, order:2, offset:14}} lg={{span:15, order:1, offset:0}} xl={{span:15, order:1, offset:0}} xxl={{span:9, order:1, offset:6}}>
                        <Menu
                            theme="dark"
                            mode="horizontal"
                            defaultSelectedKeys={this.props.initKey}
                            style={{ lineHeight: "64px", textAlign:"right" }}
                            overflowedIndicator={<Icon type="menu" />}
                            onOpenChange={this.popFunc.bind(this)}
                        >
                            {this.state.navs.map((item, index)=>{
                                return (
                                    <Menu.Item key={`${index+1}`}><Link to={item.to}><Icon type={item.icon} />{item.tit}</Link></Menu.Item>
                                )
                            })}
                        </Menu>
                    </Col>
                    
                    
                    
                    {/* <Col md={{span:3, order:2}} xs={{span:10, order:1}} xl={{span:4, order:2}} xxl={{span:3, order:2}}>
                        <div className="search_box">
                            <Search
                            placeholder="input search text"
                            // value={this.state.inputValue}
                            // onChange={this.handleChange}
                            onSearch={value => {
                                this.handleAdd(value);
                            }}
                            enterButton
                            />
                        </div>
                    </Col>

                    <Col md={{span:3, order:3}} xs={{span:6, order:3}} xl={{span:4, order:3}} xxl={{span:3, order:3}} >
                        <h3 className="username">
                            <Avatar icon="user" style={{ width: 29, height: 29 }} />{" "}
                            {this.props.username}
                        </h3>
                    </Col> */}
                        
                    
                </Row>
            </Header>
                <Drawer
            title="导航栏"
            placement="right"
            closable={true}
            onClose={this.onClose.bind(this)}
            visible={this.state.visible}
            bodyStyle={{padding:0}}
            >
                <Menu
                    theme="light"
                    mode="inline"
                    defaultSelectedKeys={this.props.initKey}
                    style={{ lineHeight: "64px", textAlign:"right" }}
                    overflowedIndicator={<Icon type="menu" />}
                    onOpenChange={this.popFunc.bind(this)}
                >
                    {this.state.navs.map((item, index)=>{
                        return (
                            <Menu.Item key={`${index+1}`}><Link to={item.to}><Icon type={item.icon} />{item.tit}</Link></Menu.Item>
                        )
                    })}
                </Menu>
            </Drawer>
        </Fragment>
        );
    }
}

export default HeaderCom;
